import React from "react";
import Ys4funToolsAppContext from "@/contexts/Ys4funToolsContext";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconName } from "@fortawesome/fontawesome-svg-core";
import { IMenuOptionTagAttributeMap, IYs4funToolsAppContextProps, IMenuOptionsPanelState } from "@/types";
import "./MenuOptionsPanel.css";

class MenuOptionsPanel extends React.Component<{}, IMenuOptionsPanelState> {
    static contextType = Ys4funToolsAppContext;
    declare context: React.ContextType<typeof Ys4funToolsAppContext>;

    constructor(props: IYs4funToolsAppContextProps) {
        super(props);
    }

    openMenu = (event: React.MouseEvent): void => {
        event.stopPropagation();
        $(event?.target).parents(".menu-options-panel")
            .toggleClass("active");
    }

    menuOptionsGenerator = (): React.ReactNode => {
        return this.context?.config?.menuOptionTagConfigDataList?.map((data) => {
            const menuOptionTagAttributes: IMenuOptionTagAttributeMap = {
                title: data.title,
                id: "tools-" + data.name,
                className: "menu-option-item",
                style: {
                    "--i": data.id.toString(),
                    "--c": data.color,
                } as React.CSSProperties,
            };

            return (
                <li key={data.id} {...menuOptionTagAttributes}>
                    <a href={data.link || "#"} target={data.target}>
                        <FontAwesomeIcon icon={["fas", data.iconTag as IconName]} size="lg" />
                    </a>
                </li>
            )
        })
    }

    render(): React.ReactNode {
        const { methods: { toggleDraggable } } = this.context;
        return (
            <div className="menu-options-panel">
                <div
                    className="menu-switch-button"
                    role="button"
                    onClick={this.openMenu}
                    onMouseDown={toggleDraggable}
                    title="点击打开菜单,再次点击按住可拖动!"
                >
                    <div className="switch-button-icon"></div>
                </div>
                <ul className="menu-options-list">
                    {this.menuOptionsGenerator()}
                </ul >
            </div >
        )
    }
}

export default MenuOptionsPanel;
